<template>
    <div>
<table>
    <tr>
        <td>名称</td>
        <td>
            <input type="text" v-model="state.mname"/>
        </td>
    </tr>
    <tr>
        <td>电话</td>
        <td>  <input type="text" v-model="state.mphone"/></td>
    </tr>
    <tr>
        <td>图片</td>
        <td>
            <input type="file"  @change="shang"  />
            <img :src="src" alt="" header="100px" width="100px" v-if="src!=''"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="上传" @click="shangchuan" />
        </td>      
    </tr>
  
</table>

    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()

const data = reactive({
    state:{
        mname:'',
        mphone:'',
        mimage:'',
     
    },
    src:''
})

const {state,src} = toRefs(data)

const shang = (e:any)=>{
    let file = e.target.files[0]
    let from = new FormData()
  from.append('file',file)
  axios({
    url:'https://localhost:7146/api/Image',
    method:'post',
    data:from
  }).then((res)=>{
    src.value='https://localhost:7146' + res.data.fileName
    state.value.mimage=res.data.fileName
  })

  
 
}

const shangchuan = ()=>{

    axios({
        url:'https://localhost:7146/api/Member/addMember',
        method:'post',
        data:state.value
    }).then((res)=>{
       if(res.data.data>0)
       {
        alert('上传成功')
       }
       else
       {
        alert('上传失败')
       }
       
      
    })
  
    
}

</script>

<style scoped>

</style>